<template>
  <div>
    <!--    面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>开店申请</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    卡片视图区域-->
    <el-card class="box-card">
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm" label-position="left">
      <el-steps :active="activeIndex" simple>
        <el-step title="门店信息" icon="el-icon-edit"></el-step>
        <el-step title="资质信息" icon="el-icon-upload"></el-step>
        <el-step title="开店人信息" icon="el-icon-picture"></el-step>
      </el-steps>
        <el-alert
          title="准确填写牌匾名、地址和类目，市场经理会尽快联系您"
          type="info"
          show-icon>
        </el-alert>
          <!--      基本信息-->
        <el-row style="margin-top: 20px" v-if="activeIndex === 0">
          <el-row :gutter="20">
            <el-col :span="3" :offset="3"><div class="grid-content bg-purple">基本信息</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-form-item label="线下店铺牌匾名" prop="shopName" label-width="150px">
                <el-input v-model="ruleForm.shopName"></el-input>
              </el-form-item>
              <el-form-item label="门店位置" prop="placeId" label-width="150px">
                <el-select v-model="ruleForm.placeId" clearable placeholder="门店位置 必选">
                  <el-option
                    v-for="item in rolelist"
                    :key="item.placeId"
                    :label="item.placeName"
                    :value="item.placeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div></el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="20">
            <el-col :span="3" :offset="3"><div class="grid-content bg-purple">经营信息</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-form-item label="店铺分类" prop="shopCategoryId" label-width="150px">
                <el-col :span="12">
                  <el-select v-model="ruleForm.shopCategoryId" clearable placeholder="店铺分类 必选">
                    <el-option
                      v-for="item in options"
                      :key="item.shopCategoryId"
                      :label="item.shopCategoryName"
                      :value="item.shopCategoryId">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item label="食堂" label-width="150px">
                <el-radio v-model="ruleForm.shopSpace" label="1">有食堂</el-radio>
                <el-radio v-model="ruleForm.shopSpace" label="0">无食堂</el-radio>
              </el-form-item>
              <!--                门脸照-->
              <el-form-item label="门脸照" prop="shopFaceImg" label-width="150px">
                <span>需拍全，包含完整的牌匾、门框(建议正对门店 2 米处拍摄)</span>
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8088/uploadpacture"
                  :show-file-list="false"
                  :on-success="shopFaceImgData"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="shopFaceImgUrl" :src="shopFaceImgUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <!--                店内照-->
              <el-form-item label="店内照" prop="shopInImg" label-width="150px">
                <span>需真实反映堂食区域</span>
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8088/uploadpacture"
                  :show-file-list="false"
                  :on-success="shopInImgData"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="shopInImgUrl" :src="shopInImgUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <!--                门店logo-->
              <el-form-item label="门店logo" prop="shopLogo" label-width="150px">
                <span>可在线选择或者自行上传，开店后可随时修改（大小不超过500K)</span>
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8088/uploadpacture"
                  :show-file-list="false"
                  :on-success="shopLogoSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="shopLogoUrl" :src="shopLogoUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <!--                外卖电话-->
              <el-form-item label="外卖电话" prop="shopOutPhone" label-width="150px">
                <el-input v-model="ruleForm.shopOutPhone"></el-input>
              </el-form-item>
              <!--                联系人姓名-->
              <el-form-item label="联系人姓名" prop="shopOutName" label-width="150px">
                <el-input v-model="ruleForm.shopOutName"></el-input>
              </el-form-item>
              <!--                联系电话-->
              <el-form-item label="联系电话" prop="shopInPhone" label-width="150px">
                <el-input v-model="ruleForm.shopInPhone"></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="6">
              <el-button type="primary" @click="activeIndex = 1" style="bottom:20px;right: 20px;position: fixed">下一步</el-button>
            </el-col>
          </el-row>
        </el-row>
        <!--      资质信息-->
        <el-row style="margin-top: 20px" v-if="activeIndex === 1">
          <el-row :gutter="20">
            <el-col :span="3" :offset="3"><div class="grid-content bg-purple">主体资质</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-form-item label="证件类型" prop="shopMainIdentity" label-width="150px">
                <el-col :span="12">
                  <el-select v-model="ruleForm.shopMainIdentity" clearable placeholder="证件类型 必选">
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item label="资质照片" prop="shopMainIdentityImg" label-width="150px">
<!--                上传资质照片-->
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8088/uploadpacture"
                  :show-file-list="false"
                  :on-success="shopMainIdentityImgSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="shopMainIdentityImgUrl" :src="shopMainIdentityImgUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="注册号" prop="shopMainZhucehao" label-width="150px">
                <el-input v-model="ruleForm.shopMainZhucehao"></el-input>
              </el-form-item>
              <el-form-item label="单位名称" prop="shopMainDanweiming" label-width="150px">
                <el-input v-model="ruleForm.shopMainDanweiming"></el-input>
              </el-form-item>
              <el-form-item label="法定代表人" prop="shopMainFaren" label-width="150px">
                <el-input v-model="ruleForm.shopMainFaren"></el-input>
              </el-form-item>
              <el-form-item label="经营场所" prop="shopMainPlace" label-width="150px">
                <el-input v-model="ruleForm.shopMainPlace"></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>
          <el-divider></el-divider>
<!--          特殊资质-->
          <el-row :gutter="20">
            <el-col :span="3" :offset="3"><div class="grid-content bg-purple">特殊资质</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-form-item label="证件类型" prop="shopOtherIdentity" label-width="150px">
                <el-input v-model="ruleForm.shopOtherIdentity"></el-input>
              </el-form-item>
              <el-form-item label="资质照片" prop="shopOtherIdentityImg" label-width="150px">
                <!--                上传资质照片-->
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8088/uploadpacture"
                  :show-file-list="false"
                  :on-success="shopOtherIdentityImgSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="shopOtherIdentityImgUrl" :src="shopOtherIdentityImgUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div></el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="20">
            <el-col :span="12" :offset="6">
              <template>
                <!-- `checked` 为 true 或 false -->
                <el-checkbox v-model="checked">我已确认资质真实有效，且授权平台代为修正文本填写信息</el-checkbox>
              </template>
            </el-col>
            <el-col :span="5" :offset="1" style="position: fixed;right:-40px;bottom: 20px">
              <el-button @click="activeIndex = 0">返回上一步</el-button>
              <el-button type="primary" @click="activeIndex = 2">下一步</el-button>
            </el-col>
          </el-row>
        </el-row>
        <!--        开店人信息-->
        <el-row style="margin-top: 20px" v-if="activeIndex === 2">
          <el-row :gutter="20">
            <el-col :span="3" :offset="3"><div class="grid-content bg-purple">开店人信息</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple">
              <el-form-item label="真实姓名" prop="mgName" label-width="150px">
                <el-input v-model="ruleForm.mgName"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="mgIdcard" label-width="150px">
                <el-input v-model="ruleForm.mgIdcard"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="mgPhone" label-width="150px">
                <el-input v-model="ruleForm.mgPhone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="mgEmail" label-width="150px">
                <el-input v-model="ruleForm.mgEmail"></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="5" :offset="1" style="position: fixed;right:-40px;bottom: 20px">
              <el-button @click="activeIndex = 1">返回上一步</el-button>
              <el-button type="primary" @click="submitSuccess">提交</el-button>
            </el-col>
          </el-row>
        </el-row>
      </el-form>
    </el-card>
    <!--      回到顶部-->
    <el-backtop :bottom="70">up</el-backtop>
  </div>
</template>
<script>
export default {
  data () {
    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      //  验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号码的规则
    var checkMobile = (rule, value, cb) => {
      const regMobile = /^1[34578]\d{9}$/
      if (regMobile.test(value)) {
        return cb()
      }
      // 返回一个错误提示
      cb(new Error('请输入合法的手机号码'))
    }
    return {
      // 保存图片返回的地址
      // 门脸照片
      shopFaceImgUrl: '',
      // 室内照片
      shopInImgUrl: '',
      // logo照片
      shopLogoUrl: '',
      // 资质照片
      shopMainIdentityImgUrl: '',
      // 其他资质照片
      shopOtherIdentityImgUrl: '',
      // 资质信息处
      checked: true,
      // 当前激活的步骤条
      activeIndex: 0,
      // 上传图片
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      // 经营类目
      options: [],
      // 食堂的单选按钮
      radio: '1',
      // 证件类型
      options2: [{
        value: '0',
        label: '营业执照'
      }, {
        value: '1',
        label: '事业单位法人证书'
      }, {
        value: '2',
        label: '民办非企业单位登记证书'
      }, {
        value: '3',
        label: '社会团体法人登记证书'
      }, {
        value: '4',
        label: '社会团体法人登记证书'
      }],
      ruleForm: {
        mgEmail: '',
        mgIdcard: '',
        mgName: '',
        mgPhone: '',
        placeId: '',
        shopCategoryId: '',
        shopFaceImg: '',
        shopInPhone: '',
        shopLogo: '',
        shopMainDanweiming: '',
        shopMainFaren: '',
        shopMainIdentity: '',
        shopMainIdentityImg: '',
        shopMainPlace: '',
        shopMainZhucehao: '',
        shopName: '',
        shopOtherIdentity: '',
        shopOtherIdentityImg: '',
        shopOutName: '',
        shopOutPhone: '',
        shopPriority: '',
        shopSpace: '',
        shopStatus: ''
      },
      queryInfo: {
        // 当前的页数
        pageNum: 1,
        pageSize: 100
      },
      // 获取区域信息
      rolelist: [],
      rules: {
        shopName: [
          { required: true, message: '请输入线下店铺牌匾名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        placeName: [
          { required: true, message: '请输入门店位置', trigger: 'blur' }
        ],
        shopCategoryId: [
          { required: true, message: '请选择店铺分类', trigger: 'blur' }
        ],
        shopSpace: [
          { required: true, message: '请选择有无食堂', trigger: 'blur' }
        ],
        shopFaceImg: [
          { required: true, message: '请上传门脸照', trigger: 'blur' }
        ],
        shopInImg: [
          { required: true, message: '请上传店内照片', trigger: 'blur' }
        ],
        shopLogo: [
          { required: true, message: '请上传店门店logo', trigger: 'blur' }
        ],
        shopOutPhone: [
          { required: true, message: '请输入外卖电话', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        shopOutName: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        shopInPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        shopMainIdentity: [
          { required: true, message: '请选择证件类型', trigger: 'blur' }
        ],
        shopMainIdentityImg: [
          { required: true, message: '请上传资质照片', trigger: 'blur' }
        ],
        shopMainZhucehao: [
          { required: true, message: '请输入注册号', trigger: 'blur' }
        ],
        shopMainDanweiming: [
          { required: true, message: '请输入单位名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        shopMainFaren: [
          { required: true, message: '请输入法定代表人', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        shopMainPlace: [
          { required: true, message: '请输入经营场所', trigger: 'blur' }
        ],
        mgName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        mgIdcard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }],
        mgPhone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        mgEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getShopType()
    console.log('店铺分类信息')
    console.log(this.options)
    this.getRolesList()
    console.log('区域信息')
    console.log(this.rolelist)
  },
  methods: {
    // 获取开店地址
    async getRolesList () {
      const { data: res } = await this.$http.get('getplaces', { params: this.queryInfo })
      if (res.status !== 200) {
        return this.$message.error('获取区域列表失败！')
      }
      console.log('res数据')
      console.log(res.data.list)
      this.rolelist = res.data.list
    },
    // 上传门脸照片成功时
    shopFaceImgData (res, file) {
      this.shopFaceImgUrl = URL.createObjectURL(file.raw)
      if (res.status === 200) {
        this.ruleForm.shopFaceImg = res.data
        return this.$message.success('上传成功')
      } else {
        return this.$message.error('上传失败')
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 上传店内照
    shopInImgData (res, file) {
      this.shopInImgUrl = URL.createObjectURL(file.raw)
      if (res.status === 200) {
        this.ruleForm.shopInImg = res.data
      }
    },
    // 店铺logo上传
    shopLogoSuccess (res, file) {
      this.shopLogoUrl = URL.createObjectURL(file.raw)
      if (res.status === 200) {
        this.ruleForm.shopLogo = res.data
      }
    },
    // 资质照片上传
    shopMainIdentityImgSuccess (res, file) {
      this.shopMainIdentityImgUrl = URL.createObjectURL(file.raw)
      if (res.status === 200) {
        this.ruleForm.shopMainIdentityImg = res.data
      }
    },
    // 其他资质照片
    shopOtherIdentityImgSuccess (res, file) {
      this.shopOtherIdentityImgUrl = URL.createObjectURL(file.raw)
      if (res.status === 200) {
        this.ruleForm.shopOtherIdentityImg = res.data
      }
    },
    // 获取店铺类型
    async getShopType () {
      const { data: res } = await this.$http.get('getshopcategorylist')
      if (res.status !== 200) {
        return this.$message.error('获取店铺类型失败！')
      }
      this.options = res.data
    },
    //  提交商家的开店申请registshop
    submitSuccess () {
      this.$refs.ruleFormRef.validate(async valid => {
        if (!valid) return
        // 可以发起申请开店的网络请求
        const { data: res } = await this.$http.post('registshop', this.ruleForm)
        if (res.status !== 200) {
          return this.$message.error(res.msg)
        }
        this.$message.success('申请店铺成功！')
      })
      console.log(this.ruleForm)
    }
  }
}
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
